<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<view class="top">
			<userinfo-card  :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
			<!-- <view class="mine">我的</view>
			v-if="userHeadData && userHeadData.style"
			<view class="t_top" @tap="$Router.push('/pages/user/info')">
				<view class="t_box">
					<image class="timg" :src="userInfo.avatar || $IMG_URL + '/imgs/base_avatar.png'" mode="aspectFill"></image>
					<view class="tname">
						<view>{{ userInfo.nickname || '请登录~' }}</view>
						<image src="../../static/images/huanhuan.png"></image>
					</view>
				</view>
				<image class="t_shi" src="../../static/images/sheshe.png"></image>
			</view> -->
			<!-- 55 -->
			<!-- 555 -->
			<view class="vip" v-if="userInfo.vip>0">
				<view class="v_l">
					<view class="v_t">VIP专享</view>
					<view class="v_b">会员有效期：{{lists.createtime}}--{{lists.expiretime}}</view>
				</view>
				<!-- <view class="v_t">{{lists.discount_text}}</view> -->
				<view class="v_r">节省了：{{lists.discount}}￥</view>
			</view>
			<view class="vip" v-if="userInfo.vip==0 || !isLogin">
				<view class="v_ls">
					<view class="v_t">{{lists.discount_text}}</view>
					<!-- <view class="v_b">会员有效期：{{lists.createtime}}--{{lists.expiretime}}</view> -->
				</view>
				
			</view>
		</view>
		<!-- 钱包 -->
		<sh-wallet></sh-wallet>
		<!-- <view class="baodan" @click="baodan()">
			<view>我的保单</view>
			<image src="../../static/images/fhs.png"></image>
		</view>
		<view class="baodan" @click="jia()">
			<view>驾驶证识别</view>
			<image src="../../static/images/fhs.png"></image>
		</view> -->
		<!-- 订单卡片 -->
		<sh-order-card></sh-order-card>
		<!-- 个人信息卡片 -->
		<!-- <userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card> -->
		<!-- 自定义模块 -->
		<view v-for="(item, index) in userTemplate" :key="item.id">
			
			<!-- 轮播 -->
			<!-- <sh-banner v-if="item.type === 'banner' && index !== 0" :Px="item.content.x" :Py="item.content.y"
				:borderRadius="item.content.radius" :height="item.content.height" :list="item.content.list"></sh-banner> -->
			<!-- 滑动宫格 -->
			<!-- <sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style">
			</sh-grid-swiper> -->
			<!-- 广告魔方 -->
			<!-- <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv> -->
			<!-- 推荐商品 -->
			<!-- <sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content">
			</sh-hot-goods> -->
			<!-- 富文本 -->
			<!-- <sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext> -->
			<!-- 功能列表 -->
			<!-- <sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell> -->
			<!-- 九宫格列表 -->
			<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>
			
			
		</view>
		<!-- copyright -->
		<!-- <view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
			<view class="copyright-text">{{ initShop.copyright[0] }}</view>
			<view class="copyright-text">{{ initShop.copyright[1] }}</view>
		</view> -->

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<!-- <shopro-float-btn></shopro-float-btn> -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<gmy-float-touch :imgLists="imgLists" :mainImg="mainImg" @menuClick="floatTouchClick"></gmy-float-touch>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shAdv from './components/sh-adv.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shCell from './components/sh-cell.vue';
	import shGrid from './components/sh-grid.vue';
	import shOrderCard from './components/sh-order-card.vue';
	import shWallet from './components/sh-wallet.vue';
	import shHotGoods from './components/sh-hot-goods.vue';

	import userinfoCard from './user/userinfo-card.vue';
    	import gmyFloatTouch from "@/components/gmy-float-touch/gmy-float-touch.vue" 
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import share from '@/shopro/share';

	export default {
		components: {
			shBanner,
			shGridSwiper,
			shAdv,
			shRichtext,
			shCell,
			shGrid,
			shWallet,
			shOrderCard,
			shHotGoods,
			userinfoCard,
			gmyFloatTouch
			

		},
		data() {
			return {
				scrollTop: 0,
				showShare: false,
				enable: false, //是否开启吸顶。
				lists:''
				
			};
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		onShow() {
			this.lvshi()
			console.log(this.userInfo,"个人信息")
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
		},

		methods: {
				...mapGetters(['isLogin', 'userInfo', 'userOtherData']),
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			onShare() {
				this.showShare = true;
				uni.hideTabBar();
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 我的保单
			baodan(){
				if (this.isLogin) {
					this.jump('/pages/index/baodan', {
						goodsList: '',
						from: ''
					});
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			//驾驶证识别
			jia(){
				if (this.isLogin) {
					this.jump('/pages/index/jiashizhneg', {
						goodsList: '',
						from: ''
					});
				} else {
					this.$store.dispatch('showAuthModal');
				}
			},
			lvshi() {
				this.$http('addons.vip_detail', {
					level:1,
				}).then(res => {
				    console.log(res.data,"会员期限")
					 this.lists=res.data
					if (res.code === 1) {
				       
						// console.log(this.lists,"会员期限666")
					}
				});
			},
			// 初始化
			init() {
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			}
		}
	};
</script>

<style lang="scss">
	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}
	.top{
		width: 100%;
		height: 516rpx;
		background-color: #2442CB ;
		margin-bottom: 100rpx;
	}
	.mine{
		padding-top: 40rpx;
		height: 140rpx;
		line-height: 180rpx;
		font-size: 34rpx;
		font-family: Microsoft YaHei-Regular, Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		color: #fff;
		text-align: center;
	}
	.t_top{
		padding: 30rpx 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.t_shi{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.t_box{
		display: flex;
		align-items: center;
		// justify-content: space-between;
		.timg{
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
		}
		.tname{
			margin-left: 15rpx;
			display: flex;
			align-items: center;
			image{
				margin-left: 10rpx;
				width: 40rpx;
				height: 40rpx;
			}
			view{
				font-size: 28rpx;
				font-family: Microsoft YaHei-Bold, Microsoft YaHei;
				// font-weight: bold;
				color: #FFFFFF;
			}
		}
		
	}
	.vip{
		position: relative;
		top: -190rpx;
		left: 20rpx;
		// text-align: center;
		width: 710rpx;
		height: 118rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #000;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.v_l{
			.v_t{
				font-size: 36rpx;
				font-family: Source-KeynoteartHans-Regular, Source-KeynoteartHans;
				font-weight: 400;
				color: #F2CE94;
			}
			.v_b{
				margin-top: 10rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei-Light, Microsoft YaHei;
				font-weight: 300;
				color: #F2CE94;
			}
		}
		.v_ls{
			margin: auto;
			text-align: center;
			.v_t{
				
				text-align: center;
				font-size: 36rpx;
				font-family: Source-KeynoteartHans-Regular, Source-KeynoteartHans;
				font-weight: 400;
				color: #F2CE94;
			}
			.v_b{
				margin-top: 10rpx;
				font-size: 20rpx;
				font-family: Microsoft YaHei-Light, Microsoft YaHei;
				font-weight: 300;
				color: #F2CE94;
			}
		}
		.v_r{
			width: 220rpx;
			height: 64rpx;
			background: linear-gradient(90deg, #FAE5B0 0%, #FAEBCE 100%);
			border-radius: 64rpx 64rpx 64rpx 64rpx;
			opacity: 1;
			line-height: 64rpx;
			text-align: center;
			font-size: 24rpx;
		}
		
	}
	.baodan{
		width: 100%;
		padding: 30rpx 40rpx;
		font-size: 26rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		image{
			width: 30rpx;
			height: 30rpx;
		}
		
	}
</style>
